<%--
  Created by IntelliJ IDEA.
  User: wwy
  Date: 2025/3/5
  Time: 10:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"
         isELIgnored="false" %>
<%@ taglib prefix="rapid" uri="http://www.rapid-framework.org.cn/rapid" %>

<rapid:override name="title">社保管理</rapid:override>

<rapid:override name="head_extend">
  <link href="/static/admin_v1/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }
    .tab-container {
      margin: 20px;
    }
    .tab-btn {
      padding: 10px 20px;
      cursor: pointer;
      background: #4CAF50;
      color: white;
      border: none;
      margin-right: 5px;
    }
    .tab-content {
      display: none;
      margin-top: 10px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
    }
    th {
      background-color: #f2f2f2;
    }
  </style>
</rapid:override>

<rapid:override name="content">
  <div class="row">
    <div class="col-sm-12">
      <div class="ibox float-e-margins">
        <div class="ibox-title">
          <h5>社保管理</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
              <i class="fa fa-wrench"></i>
            </a>
            <ul class="dropdown-menu dropdown-user">
              <li><a href="table_basic.html#">选项1</a>
              </li>
              <li><a href="table_basic.html#">选项2</a>
              </li>
            </ul>
            <a class="close-link">
              <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content">
          <div class="row">
            <div class="col-sm-3">
              <div class="input-group">
                <input type="text" placeholder="请输入关键词" class="input-sm form-control"> <span class="input-group-btn">
                                        <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
              </div>
            </div>
          </div>
          <div class="ibox-content">
            <div class="row">
              <!-- 标签页按钮 -->
              <button class="tab-btn" onclick="showTab('insurance-type')">社保类型管理</button>
              <button class="tab-btn" onclick="showTab('employee-insurance')">员工参保信息</button>
              <button class="tab-btn" onclick="showTab('payment-record')">社保缴纳记录</button>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-striped">
              <!-- 社保类型管理内容 -->
              <div id="insurance-type" class="tab-content">
                <table>
                  <tr>
                    <th>社保类型名称</th>
                    <th>公司缴纳比例</th>
                    <th>个人缴纳比例</th>
                  </tr>
                  <!-- 模拟数据 -->
                  <tr>
                    <td>养老保险</td>
                    <td>16%</td>
                    <td>8%</td>
                  </tr>
                  <tr>
                    <td>医疗保险</td>
                    <td>8%</td>
                    <td>2%</td>
                  </tr>
                </table>
              </div>

              <!-- 员工参保信息内容 -->
              <div id="employee-insurance" class="tab-content">
                <table>
                  <tr>
                    <th>员工编号</th>
                    <th>社保类型</th>
                    <th>缴纳基数</th>
                    <th>生效日期</th>
                  </tr>
                  <!-- 模拟数据 -->
                  <tr>
                    <td>EMP001</td>
                    <td>养老保险</td>
                    <td>5000</td>
                    <td>2024-01-01</td>
                  </tr>
                  <tr>
                    <td>EMP002</td>
                    <td>医疗保险</td>
                    <td>6000</td>
                    <td>2024-02-01</td>
                  </tr>
                </table>
              </div>

              <!-- 社保缴纳记录内容 -->
              <div id="payment-record" class="tab-content">
                <table>
                  <tr>
                    <th>员工编号</th>
                    <th>社保类型</th>
                    <th>缴纳月份</th>
                    <th>公司缴纳金额</th>
                    <th>个人缴纳金额</th>
                  </tr>
                  <!-- 模拟数据 -->
                  <tr>
                    <td>EMP001</td>
                    <td>养老保险</td>
                    <td>2024-03</td>
                    <td>800</td>
                    <td>400</td>
                  </tr>
                  <tr>
                    <td>EMP002</td>
                    <td>医疗保险</td>
                    <td>2024-03</td>
                    <td>480</td>
                    <td>120</td>
                  </tr>
                </table>
              </div>
            </table>
          </div>


        </div>
      </div>
    </div>

  </div>
  <script>
    function showTab(tabId) {
      const tabContents = document.querySelectorAll('.tab-content');
      tabContents.forEach(content => content.style.display = 'none');
      document.getElementById(tabId).style.display = 'block';
    }
  </script>
</rapid:override>

<rapid:override name="js_extend">
  <!-- Bootstrap table -->
  <script src="/static/admin_v1/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
  <script src="/static/admin_v1/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
  <script src="/static/admin_v1/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
  <script src="/static/admin_v1/js/bootstrap-paginator.js"></script>

  <!-- Peity -->
  <script src="/static/admin_v1/js/demo/bootstrap-table-demo.js"></script>
  <script>
    $(function () {
      $('#pagination').bootstrapPaginator({
        bootstrapMajorVersion: 3,
        currentPage: ${requestScope.pageInfo.pageNum },
        totalPages: ${requestScope.pageInfo.pages },
        pageUrl: function (type, page, current) {
          return '/admin/user/get.do?pageNum=' + page;
        },
        itemTexts: function (type, page, current) {
          switch (type) {
            case "first":
              return "首页";
            case "prev":
              return "上一页";
            case "next":
              return "下一页";
            case "last":
              return "末页";
            case "page":
              return page;
          }
        }
      });
    });
  </script>
</rapid:override>

<%@include file="/jsp/common/admin/base.jsp" %>
